<script setup name="login">
import { ref } from 'vue';

import { useRouter, useRoute } from 'vue-router';
import { reactive } from 'vue';
import { useStore } from 'vuex';

import { CODE_WAIT_TIME } from '@/constants';

import { throttle } from 'lodash';

const store = useStore();
const router = useRouter(); // 编程式导航


const account = localStorage.getItem('account') || '';
const password = localStorage.getItem('password') || '';
const isMemo = localStorage.getItem('isMemo') === 'true' || true;

const params = reactive({
  // account: 'xiaotuxian001',
  // password: '123456',
  account: isMemo ? account : '',
  password: isMemo ? password : '',
  isMemo,
  isAgree: false,
  mobile: '13888888888',
  code: '123456',
  // mobile: '',
  // code: '',
});

// 账号密码登入
async function onLoginWithAccount() {
  const res = await store.dispatch('user/login', params);
  if (res.success) {
    // 如果勾选了记住我 就记录相关数据
    if (params.isMemo) {
      localStorage.setItem('account', params.account);
      localStorage.setItem('password', params.password);
      localStorage.setItem('isMemo', params.isMemo);
    }
    router.go(-1);
  } else {
    // 失败了清空密码
    params.password = '';
  }
}
// 验证码登入
async function onLoginWithCode() {
  console.log(1);
}

// 表单验证
const rules = reactive({
  account: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    // 字母开头 6-20个字符
    { pattern: /^[a-zA-Z][a-zA-Z0-9]{5,19}$/, message: '字母开头6-20个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 24, message: '长度在 6 到 24 个字符', trigger: 'blur' },
  ],
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 6, max: 6, message: '长度为6位', trigger: 'blur' },
  ],
});

// 验证码 还是 账号密码
const howWay = ref(false);

// 发送验证码
const countDown = ref(CODE_WAIT_TIME);

// 发验证码请求函数
// 发送验证码要节流
const sendCodeWithCheckSuccess = throttle(function() {
  let timer = null;
  useApi.loginWithCode(params.mobile)
    .then((msg) => {
      ElMessage({
        message: msg,
        type: 'success',
      });
    })
    .catch((err) => {
      ElMessage({
        message: err,
        type: 'error',
      });
    });
  countDown.value = CODE_WAIT_TIME - 1; // 倒计时秒数
  timer = setInterval(() => {
    countDown.value--;
    if (countDown.value < 1) {
      clearInterval(timer);
      countDown.value = CODE_WAIT_TIME; // 结束倒计时恢复60s
    }
  }, 1000);
}, CODE_WAIT_TIME * 1000);

function sendCode() {
  if (!/^1[3456789]\d{9}$/.test(params.mobile)) {
    return;
  }
  sendCodeWithCheckSuccess();
}

</script>

<template>
  <div class="wrapper">
    <div class="login">
      <el-card class="box-card">
        <el-form
          ref="form"
          :model="params"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <h1 class="login-title">影院售票管理系统</h1>
          <el-form-item label="用户" prop="userName">
            <el-input v-model="params.userName" placeholder="请输入用户名">
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="params.password"
              type="password"
              placeholder="请输入密码"
              show-password="true"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetForm">重置</el-button>
            <el-button @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .wrapper {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .login {
      width: 100vw;
      height: 100vh;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      align-items: center;
      flex-flow: column;
      background: url(http://192.168.26.56:8082/static/img/bg_admin.b801224.png);
      // background: url(../../../assets/imgs/efa188e35415deb96fda17fce3287a12.jpeg);
      .box-card {
        box-shadow: 0 0 8px 8px #ccc;
        width: 500px;
        height: 400px;
        display: flex;
        background-color: rgba(255, 255, 255, 0.8);
        flex-direction: column-reverse;
        justify-content: center;
        .login-title {
          color: #888;
          text-align: center;
          font-size: 40px;
          padding-left: 10px;
        }
        :deep(.el-input__wrapper) {
          width: 246px;
          flex-grow: 0;
        }
      }
    }
  }
</style>
